<template>
  <div class="recommend-list">
    <div class="title with-grey-bottom-border">
      <span :style="{borderLeftColor: mainColor}">推荐商品</span>
    </div>
    <div class="item-list">
      <div
        @click="$router.push('/item-detail/' + item.id)"
        class="item-cell"
        v-for="(item, index) in list"
      >
        <div class="item-img">
          <img :src="item.img_show" alt="" />
        </div>
        <div class="item-title">
          {{ item.name }}
        </div>
        <div class="info">
          <div class="price">
            <div class="normal-price">¥{{ item.price }}</div>
          </div>
          <div class="sale">已售{{ item.sold_out }}件</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["list"],
  computed: {
    ...mapState({
      token: state => state.user.token,
      mainColor: state => state.app.mainColor
    })
  },
};
</script>

<style lang="less" scoped>
.recommend-list {
  background: #fff;
  margin-top: 0.48rem;

  .title {
    height: 2rem;
    line-height: 2rem;
    padding: 0 3.2%;

    span {
      font-size: 0.72rem;
      font-weight: bold;
      border-left: 0.26rem solid #1883f7;
      padding-left: 0.4rem;
    }
  }

  .item-list {
    background-color: #fff;
    padding: 0.58rem 3.2%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.24rem;
    flex-wrap: wrap;

    .item-cell {
      border: 1px solid rgba(233, 233, 233, 1);
      width: 6.9rem;
      margin-bottom: 0.48rem;
      position: relative;

      .item-img {
        height: 6.9rem;
        width: 100%;
        background-color: #dfdfdf;
        img {
          height: 100%;
          width: 100%;
        }
      }

      .item-title {
        color: rgba(68, 68, 68, 1);
        font-size: 0.58rem;
        height: 1.6rem;
        overflow: hidden;
        margin: 0.4rem;
      }

      .info {
        margin: 0 0.4rem;
        display: flex;
        justify-content: space-between;
        line-height: 1.4rem;

        .price {
          .normal-price {
            font-weight: bold;
            color: rgba(68, 68, 68, 1);
            font-size: 0.48rem;
            margin-right: 0.48rem;
          }
        }

        .sale {
          color: rgba(153, 153, 153, 1);
          font-size: 0.48rem;
        }
      }
    }
  }
}
</style>
